/*
 * @Author: xiaosihan 
 * @Date: 2023-08-06 18:52:05 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-01-15 14:56:32
 */

import designEditor from "@/editorComponent/designEditor";
import utils from "@/utils/utils";
// import CollectionIcon from "@components/CollectionIcon/CollectionIcon";
// import InfiniteScroll from "@components/InfiniteScroll";
// import OnlineIcon from "@components/OnlineIcon/OnlineIcon";
import type { TabsProps } from 'antd';
import { Cascader, Tabs } from "antd";
import { autorun, toJS } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./sticker.module.less";
import stickerStore from "./stickerStore";
import { StickerData } from "#/type";
import InfiniteScroll from "@/components/InfiniteScroll";
import previewImgModalStore from "../PreviewImgModal/previewImgModalStore";

interface Iprops {
  onClick?: (url: string, name: string) => void;
}

// 图库
export default function Sticker(props: Iprops) {

  const [groupData, setGroupDate] = useState<Array<{ label: string, value: string }>>([]);
  const [activeGroup, setActiveGroup] = useState("");
  const [stickerList, setStickerList] = useState<Array<StickerData>>([]);
  const currentPage = useRef(0);
  const searchValue = useRef("");
  const [active, setActive] = useState('0');

  const [cascaderOptions, setCascaderOptions] = useState(toJS(stickerStore.cascaderOptions));
  const [stickers, setStickers] = useState(toJS(stickerStore.stickers));
  const [activeid, setActiveid] = useState(toJS(stickerStore.activeid));
  const [hasNext, setHasNext] = useState(toJS(stickerStore.hasNext));
  const [loading, setLoading] = useState(stickerStore.loading);

  useEffect(() => autorun(() => {
    setCascaderOptions(toJS(stickerStore.cascaderOptions));
    setStickers(toJS(stickerStore.stickers));
    setActiveid(toJS(stickerStore.activeid));
    setHasNext(stickerStore.hasNext);
    setLoading(stickerStore.loading);
  }), []);

  const collectionList = async (reset: boolean = false) => {
    //     setLoading(true);
    //     try {
    //         currentPage.current += 1;
    //         const dts = await loginService.collectionList({
    //             currentPage: currentPage.current,
    //             pageSize: 10,
    //             type: 'sticker',
    //         });
    //         const dt = (dts as unknown as { list: Array<StickerData> }).list;
    //         if (reset) {
    //             setStickerList(dt);
    //         } else {
    //             setStickerList([...stickerList, ...dt]);
    //         }
    //         setHasNext((dts as any).hasNext);
    //     } finally {
    //         setLoading(false);
    //     };
  }

  const items: TabsProps['items'] = [
    {
      key: '0',
      label: '图库列表',
      children: '',
    },
    {
      key: '1',
      label: '收藏图库',
      children: '',
    },
  ];

  const onChange = (val: string) => {
    setActive(val);
    currentPage.current = 0;
    setStickerList([]);
    setHasNext(true);
    if (val === '0') {

    } else {
      // collectionList(true);
    }
  }

  return (
    <div className={styles.sticker} >
      {/*<Tabs activeKey={active} items={items} onChange={onChange} className={styles.btn} />*/}
      {
        active === '0' ? <div className={styles.stickerGroup} >
          <span className={styles.label} >分组</span>
          <Cascader
            options={cascaderOptions}
            value={activeid}
            style={{ width: 'calc(100% - 40px)' }}
            onChange={(activeid) => {
              stickerStore.setActiveid(activeid as [number, number]);
            }}
          />
        </div> : ''
      }
      <InfiniteScroll
        className={styles.infiniteScroll}
        hasNext={hasNext}
        loading={loading}
        height='calc(100% - 68px)'
        request={active === '0' ? () => stickerStore.getNextPage() : collectionList}
        list={(active === "0" ? stickers : stickerList)}
      >
        {
          (active === "0" ? stickers : stickerList).map(s => {
            return (
              <div
                key={s.id} className={styles.sticker_item}
              >
                {/* <OnlineIcon disable={s.disable} /> */}
                {/* <CollectionIcon clsProps={styles.colectionHover} id={s?.id} type='collect_sticker_ids' /> */}
                <img
                  alt=""
                  onClick={() => {
                    if (props.onClick) {
                      props.onClick(s.name, s.url);
                    } else {
                      designEditor.addImg(s.name, utils.ossSuffix(s.url, 500));
                    }
                  }}
                  onMouseEnter={() => {
                    previewImgModalStore.setUrl(utils.ossSuffix(s.url, 120));
                    previewImgModalStore.setTitle(s.name);
                  }}
                  onMouseLeave={() => {
                    previewImgModalStore.setUrl("");
                  }}
                  className={styles.img}
                  src={utils.ossSuffix(s.url, 120)}
                />
              </div>
            )
          })
        }
      </InfiniteScroll>

    </div>
  );

}